<template>
    <div class="pageContainer">
        <div class="searchWarp">
            <el-form inline>
                <template v-for="condition in listCondition">
                    <CText :title="condition.name" v-model="condition.value"></CText>
                </template>
            </el-form>
            <div class="schLine">
                <CBtn @click="search(1)">查询</CBtn>
            </div>
        </div>
        <div class="treeTable">
            <div style="flex:1;">
                <div class="btnWarp">
                    <CBtn @click="showEdit">新增</CBtn>
                    <CBtn>批量删除</CBtn>
                </div>
                <CPageTable :data="tableData" :curPage="paging.curPage" :total="paging.total" @changeSize="changeSize" @changePage="search">
                    <template slot-scope="scope">
                        <CBtn type="text" @click="showEdit(scope.row)">修改</CBtn>
                        <CBtn type="text" @click="doDel(scope.row)">删除</CBtn>
                    </template>
                </CPageTable>
            </div>
        </div>
        <CDailog title="新增/编辑" :isShow="isShowEdit" @close="isShowEdit = false" @enter="doSave">
            <el-tabs v-model="curTab">
                <el-tab-pane label="基本信息" name="base">
                    <el-form :inline="true">
                        <CText size="2" form v-model="mm.casNo" title="CAS号" field="title"></CText>
                        <CText size="2"form v-model="mm.title" title="标题" field="title"></CText>
                        <CText size="2" form v-model="mm.subTitle" title="副标题" field="subTitle"></CText>
                        <CSUpload form v-model="mm.imgInfo" title="图片" field="imgInfo"></CSUpload>
                        <CText size="2" form v-model="mm.fzs" title="分子式" field="fzs"></CText>
                        <CText size="2" form v-model="mm.fzl" title="分子量" field="fzl"></CText>
                        <CText size="2" form v-model="mm.cnName" title="中文名" field="cnName"></CText>
                        <CText size="2" form v-model="mm.enName" title="英文名" field="enName"></CText>
                        <CText size="2" form v-model="mm.cnFullName" title="中文别名" field="cnFullName"></CText>
                        <CText size="2" form v-model="mm.enFullName" title="英文别名" field="enFullName"></CText>
                        <CText size="2" form v-model="mm.jqfzl" title="精确分子量" field="jqfzl"></CText>
                        <CText size="2" form v-model="mm.jxfzbmj" title="极性分子表面积" field="jxfzbmj"></CText>
                        <CText size="2" form v-model="mm.ysfpxs" title="油水分配系数" field="ysfpxs"></CText>
                        <CText size="2" form v-model="mm.mdl" title="MDL" field="mdl"></CText>
                        <CText size="2" form v-model="mm.einecs" title="EINESC" field="einecs"></CText>
                        <CText size="2" form v-model="mm.pubchem" title="PubChem" field="pubchem"></CText>
                        <CText size="2" form v-model="mm.bpn" title="BPN" field="bpn"></CText>
                        <CText size="2" form v-model="mm.inchl" title="InChl" field="inchl"></CText>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="物化性质" name="wiki_tab_whxz">
                    <CBtn @click="addwhxz">新增</CBtn>
                    <el-table :data="listwhxz" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.infoContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listwhxz.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="安全信息" name="wiki_type_aqxx">
                    <CBtn @click="addaqxx">新增</CBtn>
                    <el-table :data="listaqxx" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.infoContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listaqxx.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="制备方法与用途" name="wiki_type_zbffyyt">
                    <CBtn @click="addzbffyyt">新增</CBtn>
                    <el-table :data="listzbffyyt" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.infoContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listzbffyyt.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="化学图谱" name="wiki_type_hxtp">
                    <CBtn @click="addhxtp">新增</CBtn>
                    <el-table :data="listhxtp" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CSUpload v-model="scope.row.infoContent"></CSUpload>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            width="100"
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listhxtp.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="毒理性数据" name="wiki_type_dlxsj">
                    <CBtn @click="adddlxsj">新增</CBtn>
                    <el-table :data="listdlxsj" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CTextarea :size="4" v-model="scope.row.infoContent"></CTextarea>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            width="100"
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listdlxsj.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="合成路线" name="wiki_type_hclx">
                    <CBtn @click="addhclx">新增</CBtn>
                    <el-table :data="listhclx" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.infoContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listhclx.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="MSDS" name="wiki_type_msds">
                    <CBtn @click="addmsds">新增</CBtn>
                    <el-table :data="listmsds" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.infoContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listmsds.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="结构与计算数据" name="wiki_type_jgyjssj">
                    <CBtn @click="addjgyjssj">新增</CBtn>
                    <el-table :data="listjgyjssj" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CTextarea :size="4" v-model="scope.row.infoContent"></CTextarea>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            width="100"
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listjgyjssj.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="上下游" name="wiki_type_sxy">
                    <CBtn @click="addsxy">新增</CBtn>
                    <el-table :data="listsxy" max-height="450">
                        <el-table-column
                            fixed
                            label="标题">
                            <template slot-scope="scope">
                                <CText :size="2" v-model="scope.row.infoTitle"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="内容">
                            <template slot-scope="scope">
                                <CText :size="4" v-model="scope.row.infoContent"></CText>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed
                            label="操作">
                            <template slot-scope="scope">
                                <CBtn @click="listsxy.splice(scope.$index, 1)">删除</CBtn>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            
            
        </CDailog>
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin'

const defaultWhxz = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "R",
    infoTitle: '',
    infoContent: ""
}

const defaultAqxx = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "R",
    infoTitle: '',
    infoContent: ""
}

const defaultZbffyyt = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "R",
    infoTitle: '',
    infoContent: ""
}

const defaultHxtp = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "I",
    infoTitle: '',
    infoContent: ""
}

const defaultDlxsj = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "T",
    infoTitle: '',
    infoContent: ""
}

const defaultHclx = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "T",
    infoTitle: '',
    infoContent: ""
}

const defaultMsds = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "T",
    infoTitle: '',
    infoContent: ""
}

const defaultJgyjssj = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "R",
    infoTitle: '',
    infoContent: ""
}

const defaultSxy = {
    title: "",
    content: "",
    sortNum: 0,
    infoType: "R",
    infoTitle: '',
    infoContent: ""
}

export default {
    mixins: [pagingMixin],
    data() {
        return {
            curTab: "base",
            model: "info",
            table: "InfoHuaxWiki",
            listwhxz: [],
            listaqxx: [],
            listzbffyyt: [],
            listhxtp: [],
            listdlxsj: [],
            listhclx: [],
            listmsds: [],
            listjgyjssj: [],
            listsxy: []
        }
    },
    created() {
        this.templateId = "6a5da55c-6b7a-4d89-a16f-b66769c11570";
        
        //取得查询条件
        this.$sys.getPageConditions({id: this.templateId}).then(res => {
            this.listCondition = res.data;
        })
        //查询表格数据
        this.search(1);
    },
    methods: {
        addwhxz() {
            this.listwhxz.push({...defaultWhxz, sortNum: this.listwhxz.length});
        },
        addaqxx() {
            this.listaqxx.push({...defaultAqxx, sortNum: this.listaqxx.length});
        },
        addzbffyyt() {
            this.listzbffyyt.push({...defaultZbffyyt, sortNum: this.listzbffyyt.length});
        },
        addhxtp() {
            this.listhxtp.push({...defaultHxtp, sortNum: this.listhxtp.length});
        },
        adddlxsj() {
            this.listdlxsj.push({...defaultDlxsj, sortNum: this.listdlxsj.length});
        },
        addhclx() {
            this.listhclx.push({...defaultHclx, sortNum: this.listhclx.length});
        },
        addmsds() {
            this.listmsds.push({...defaultMsds, sortNum: this.listmsds.length});
        },
        addjgyjssj() {
            this.listjgyjssj.push({...defaultJgyjssj, sortNum: this.listjgyjssj.length});
        },
        addsxy() {
            this.listsxy.push({...defaultJgyjssj, sortNum: this.listsxy.length});
        },
        doSave() {
            console.log(234234)
            if (this.$refs.inForm) {
                this.$refs.inForm.validate((valid) => {
                    if (valid) {
                        this.$info.saveHuaxWiki({
                            wiki: this.mm,
                            listwhxz: this.listwhxz,
                            listaqxx: this.listaqxx,
                            listzbffyyt: this.listzbffyyt,
                            listhxtp: this.listhxtp,
                            listdlxsj: this.listdlxsj,
                            listhclx: this.listhclx,
                            listmsds: this.listmsds,
                            listjgyjssj: this.listjgyjssj,
                            listsxy: this.listsxy
                        }).then(res => {
                            if (200 == res.code) {
                                this.isShowEdit = false;
                                this.search(1);
                                this.$message.success("保存成功")
                            } else {
                                this.$message.error("保存失败")
                            }
                        });
                    }
                });
            } else {
                this.$info.saveHuaxWiki({
                            wiki: this.mm,
                            listwhxz: this.listwhxz,
                            listaqxx: this.listaqxx,
                            listzbffyyt: this.listzbffyyt,
                            listhxtp: this.listhxtp,
                            listdlxsj: this.listdlxsj,
                            listhclx: this.listhclx,
                            listmsds: this.listmsds,
                            listjgyjssj: this.listjgyjssj,
                            listsxy: this.listsxy
                        }).then(res => {
                    if (200 == res.code) {
                        this.isShowEdit = false;
                        this.search(1);
                        this.$message.success("保存成功")
                    } else {
                        this.$message.error("保存失败")
                    }
                });
            }
        },
    }
}
</script>

<style lang="scss" scoped></style>